<template>
	<view class="content">
		<view class="tab-scro">
			<scroll-view :scroll-x="true" class="scroll-box" :scroll-into-view="'one-nav-item-' + nav_active_index" :show-scrollbar="false" :scroll-with-animation="true">
				<view :class="['item-box' ,indexs===index ? 'bg1' : '']" v-for="(item,index) in goodsList" :key="index"
					style="overflow-x: scroll"  @tap="chooseItem(item,index,$event)" :id="'one-nav-item-' + index"  :data-index="index" :data-itemtwoindex="-1" :data-itemthreeindex="-1" >
					<image :src="item.category_pic" :style="'width:'+imgWidth+'rpx;'+'height:'+imgHeight+'rpx;'"
						mode="">
					</image>
					<view :class="['item-name' ,indexs===index ? 'item-name-color-s' : 'item-name-color-d']">
						{{item.category_name}}
					</view>

				</view>
			</scroll-view>

		</view>
	</view>
</template>
<script>
	export default {
		props: {
			listTitle: {
				type: String,
				default: ''
			},
			goodsList: {
				type: Array,
				default: () => []
			},
			click: {
				type: Number,
				default: 0
			},
			imgWidth: {
				type: Number,
				default: 128
			},
			imgHeight: {
				type: Number,
				default: 128
			},
			indexs: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				item: {
					category_id: ''
				},
				// indexs: 0,
				nav_active_index: 0,
			}
		},
		methods: {
			//点击某个item
			chooseItem(item, index,e) {
				this.item.category_id = item.category_id + ''
				this.$emit("clickItem", item)
				this.$emit("indexs", index)
				var indexs = e.currentTarget.dataset.index;
				// if(indexs)
				this.nav_active_index= indexs
				// console.log(this.nav_active_index)
			}
		

		}
	}
</script>


<style scoped>
	.tab-scro {
		display: flex;
		margin: 20rpx;
	}

	.scroll-box {
		justify-content: space-between;
		/* flex-wrap: wrap; */
		background: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		white-space: nowrap;
		display: flex;
		width: 100%;
		padding:18rpx 18rpx 12rpx 18rpx;
		
	}

	.item-box {
		display: inline-block;
		width: 98rpx;
		height: 98rpx;
		padding:8rpx;
		margin-right: 0rpx;
		text-align: center;
	}

	

	.item-name-color-d {
		color: #888;
	}
     /* #ifdef APP */
     .item-name-color-s {
     	color: #c0798a;
     	color:#f00;
     	font-size: 20rpx;
     }
	 .item-name {
	 	width: 100%;
	 	font-size: 18rpx;
/* 	 	font-weight: bold; */
	 }
     /* #endif */
	 /* #ifndef APP */
	 .item-name-color-s {
	 	color: #c0798a;
	 	color:#f00;
	 	font-size: 24rpx;
	 }
	 .item-name {
	 	/* display: table; */
	 	width: 100%;
	 	font-size: 14rpx;
	 	/* line-height: 20rpx; */
	 	font-weight: bold;
	 	white-space: pre-wrap;
	 	/* margin-top: 4rpx; */
	 	display: -webkit-box;
	 	-webkit-box-orient: vertical;
	 	-webkit-line-clamp: 1;
	 	overflow: hidden;
	 }
	 /* #endif */
	
     .bg1 {
     	/* padding: 10rpx; */
     	border-radius: 10rpx;
     	background-color: #fbe7f0;
     	color:#f00;
     	/* border: 12rpx solid #f9ecec; */
     }
	.bg0 {
		/* background: linear-gradient(180deg, #FFE8C2 0%, #FFFFFF 100%); */
	}

	

	.bg2 {
		background: linear-gradient(360deg, #FFFFFF 0%, #D7C4FF 100%);
	}

	.bg3 {
		background: linear-gradient(180deg, #FFD3D3 0%, #FFFFFF 100%);
	}

	.bg4 {
		background: linear-gradient(180deg, #D3FFFB 0%, #FFFFFF 100%);
	}

	.bg5 {
		background: linear-gradient(180deg, #D3FFE7 0%, #FFFFFF 100%);
	}

	.bg6 {
		background: linear-gradient(180deg, #FFD3FB 0%, #FFFFFF 100%);
	}
</style>